<!--
*  2021-03-15
*  坯布出库列表
-->
<template>
  <div id="app" class="cloth-store">
    <!-- 头部导航 -->
    <van-nav-bar
      ref="header"
      left-arrow
      @click-left="onClickLeft"
      left-text="返回"
    >
      <template #title>
        <span @click="onClickPrev">前一天</span>
        <span @click="show = true" style="margin: 0 10px;">{{ dateTime }}</span>
        <span @click="onClickNext">后一天</span>
      </template>
      <template #right>
        <span @click="openScanWinFn"><van-icon name="scan" size="20" /></span>
      </template>
    </van-nav-bar>
    <!-- 筛选 -->
    <van-search v-model="queryParam.designNo" placeholder="请输入搜索关键词" />
    <!-- 总计 -->
    <van-cell
      class="cloth-store__total"
      v-show="tableData.length !== 0"
      title="总数"
      :value="totalNum"
    >
    </van-cell>
    <!-- 滚动 -->
    <better-scroll class="public-scroll" :data="tableData" :totalPage="totalPage" :pulldown="true" @pulldown="loadClothStoreOutDataFn">
      <van-cell-group v-show="tableData.length !== 0">
        <div v-for="(data, index) in tableData" :key="index">
          <van-cell :title="data.designNo" :label="data.color" :value="data.num" class="start-cell" @click="onClickDetails(data)">
            <template>
              <span v-if="data.lockFlag === 1" style="
                  color: red;
                  font-weight: 700;
                  display: inline-block;
                  width: 100px;
                  height: 100%;
                  text-align: left;
                " @click.stop="onClickLock(data)">解锁</span>
              <span>{{ data.num }}</span>
            </template>
          </van-cell>
        </div>
      </van-cell-group>
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        v-show="tableData.length === 0"
        description="暂无数据"
      />
    </better-scroll>

    <!-- 日期筛选 -->
    <van-calendar
      v-model="show"
      :min-date="minDate"
      :max-date="maxDate"
      :round="false"
      @confirm="onConfirm"
    />
  </div>
</template>

<script>
import {comeBack, getFloat, openWin} from "@/utils/index";
import {getGreyClothGet, greyClothAreaNums, greyClothStoreCheckDetail, loadClothStoreOutData,} from "@/api/cloth";
import dayjs from "dayjs";

export default {
  name: "clothStore",
  data() {
    return {
      title: "",
      currentPage: 1,
      totalPage: 1,
      tableData: [],

      queryParam: {
        pageNum: 1,
        pageSize: 1000,
        beginAt: dayjs().format("YYYY-MM-DD"),
        endAt: dayjs().add(1, "day").format("YYYY-MM-DD"),
        designNo: "",
        outIds: "",
        lockFlag: 99
      },
      dateTime: dayjs().format("YYYY-MM-DD"),

      show: false,
      minDate: new Date(dayjs().subtract(1, "year")),
      maxDate: new Date(),

      totalNum: 0,
    };
  },
  watch: {
    // 监听事件筛选
    dateTime() {
      const that = this;
      that.queryParam.beginAt = dayjs(that.dateTime).format("YYYY-MM-DD 00:00:00");
      that.queryParam.endAt = dayjs(that.dateTime).add(1, "day").format("YYYY-MM-DD 00:00:00");
      that.loadClothStoreOutDataFn();
    },
    // 监听designNo
    "queryParam.designNo"(newVal, oldVal) {
      // 防止input连续输入时，频繁发请求
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        // 异步请求
        if (oldVal !== newVal) {
          this.loadClothStoreOutDataFn();
        }
      }, 1000);
    },
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      this.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }
  },
  methods: {
    getFloat,

    //初始化
    initFn(that) {
      if (window.api.pageParam.dateTime) {
        that.dateTime = window.api.pageParam.dateTime;
      }

      that.resetQueryParam();
      that.loadClothStoreOutDataFn();
    },
    // 返回
    onClickLeft() {
      comeBack();
    },
    // 前一天
    onClickPrev() {
      const that = this;
      that.dateTime = dayjs(that.dateTime).subtract(1, "day").format("YYYY-MM-DD");
    },
    // 后一天
    onClickNext() {
      const that = this;
      if (that.dateTime === dayjs().format("YYYY-MM-DD")) {
        this.$toast.fail("明天还没到");
        return false;
      }
      that.dateTime = dayjs(that.dateTime).add(1, "day").format("YYYY-MM-DD");
    },
    // 时间筛选
    onConfirm(val) {
      const that = this;
      that.dateTime = dayjs(val).format("YYYY-MM-DD");
      that.show = false;
    },
    //扫码
    openScanWinFn() {
      const that = this;
      const zyHmsScan = window.api.require('zyHmsScan');
      zyHmsScan.openDefaultView({}, ret => {
        if(ret.status) {
          if(ret.result.indexOf("19,") == 0) {    //预出库码
            let outIds = ret.result.substring(3, ret.result.length).split(";").map(str => str.split(":")[0]).join(",");
            that.queryParam.lockFlag = "";
            that.queryParam.outIds = outIds;
            that.queryParam.beginAt = "";
            that.queryParam.endAt = "";
            that.loadClothStoreOutDataFn();
          } else if(ret.result.indexOf("12,") == 0) {    //盘库码
            greyClothStoreCheckDetail(ret.result.split(",")[1], res => {
              that.greyClothAreaNumsFn(that, res.storeId, (total, areaColumns) => {
                that.$dialog.alert({
                  message: areaColumns.map(s => s.value + "_" + s.num).join("\n")
                });
              });
            });
          } else {    //坯布码
            getGreyClothGet(ret.result.toString(), res => {
              that.greyClothAreaNumsFn(that, res.storeId, (total, areaColumns) => {
                that.$dialog.alert({
                  message: areaColumns.map(s => s.value + "_" + s.num).join("\n")
                });
              });
            });
          }
        }
      });
    },

    // 详情
    onClickDetails(data) {
      const that = this;
      that.greyClothAreaNumsFn(that, data.storeId, (res, areaColumns) => {
        openWin("store-out", {
          totalNum: res.totalNum,
          areaColumns: areaColumns,
          outId: data.id,
        });
      });
    },
    // 解锁
    onClickLock(data) {
      const that = this;
      openWin("store-lock", {
        storeId: data.id,
        dateTime: that.dateTime,
      });
    },
    // 盘库列表 // 下拉刷新
    loadClothStoreOutDataFn() {
      const that = this;
      that.tableData.splice(0, that.tableData.length);
      that.totalNum = 0;
      loadClothStoreOutData(that.queryParam, res => {
        if(res.code) {
          that.resetQueryParam();
          return;
        }
        res.list.forEach((item) => {
          that.totalNum = getFloat(that.totalNum + Number(item.num), 0);
          that.tableData.push(item);
        });
        that.resetQueryParam();
      });
    },

    //重置查询条件
    resetQueryParam() {
      const that = this;
      that.queryParam.lockFlag = 99;
      that.queryParam.outIds = "";
    },

    //坯布库存区域
    greyClothAreaNumsFn(that, storeId, callback) {
      greyClothAreaNums({ storeId: storeId }, res => {
        if (res.totalNum == 0) {
          that.$toast.fail('当前坯布库存为0')
          return false;
        }
        let areaColumns = [];
        res.areaNums.forEach(item => {
          areaColumns.push({
            label: item,
            value: item.split("_")[0],
            num: item.split("_")[1],
          });
        });
        callback(res, areaColumns);
      });
    }
  },
};
</script>

<style lang="scss">
.cloth-store {
  .van-search {
    position: relative;
    z-index: 999;
  }
  .van-nav-bar__title {
    display: flex;
    height: 100%;
    align-items: center;
    span {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
      flex: 1;
      font-size: 14px;
      &:first-child {
        color: #1989fa;
      }
      &:last-child {
        color: #ee0a24;
      }
    }
  }
  .van-nav-bar__right {
    span {
      display: flex;
      height: 100%;
      align-items: center;
    }
  }
  .cloth-store__total {
    position: relative;
    z-index: 999;
    .van-cell__title {
      flex: 0 0 40%;
    }
    .van-cell__value {
      & > div {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
    span {
      color: #1989fa;
      font-size: 16px;
    }
  }
  .public-scroll {
    height: calc(100vh - 174px);
    overflow: hidden;

    .van-cell {
      &:not(:nth-child(1)) {
        padding-top: 0;

        &:last-child {
          border-bottom: 1px solid #ddd !important;
        }

        .van-cell__value {
          flex: 0 0 70%;
          div {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            span {
              display: flex;
              flex: 1;
              justify-content: center;
              &:last-child {
                justify-content: flex-end;
              }
            }
          }
        }
      }
      &.start-cell {
        &.van-cell:not(:last-child)::after {
          border-bottom: none;
        }
        // .van-cell__title {
        //   font-weight: 600;
        //   color: #e4393c;
        // }
        // .van-cell__label {
        //   font-weight: 600;
        //   color: #e4393c;
        // }
        .van-cell__value {
          flex: 0 0 45%;
          div {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            span {
              display: flex;
              flex: 0 0 50%;
              justify-content: flex-end;
              // &.active {
              //   color: #e4393c;
              // }
            }
          }
        }
      }
    }
  }
}
</style>

